<template>
    <header>
        <ul class="nav">
            <li @click="headerSelect('home')">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </li>
            <li @click="headerSelect('tools')">
                <i class="fas fa-tools"></i>
                <span>工具</span>
            </li>
            <li @click="headerSelect('docs')">
                <i class="fas fa-file-alt"></i>
                <span>文档</span>
            </li>
            <li @click="headerSelect('community')">
                <i class="fas fa-comment-dots"></i>
                <span>社区</span>
            </li>
        </ul>
        <MobileMenu />
    </header>
</template>

<script>
import MobileMenu from './MobileMenu.vue'
import store from '../store'
import router from '../router'

export default {
    components: {
        MobileMenu,
    },

    setup() {
        const headerSelect = item => {
            store.commit('setAsideData', item)

            if (item === 'home') {
                router.replace({ name: 'home' })
            } else {
                const actions = {
                    tools: ['setMainData', '前端工具'],
                    docs: ['setMainData', 'vue'],
                    community: ['setMainData', '博客'],
                }
                store.commit(actions[item][0], actions[item][1])
                router.replace({ name: 'cards' })
            }
        }

        return {
            headerSelect,
        }
    },
}
</script>

<style lang="scss">
header {
    display: flex;
    height: 60px;
    align-content: stretch;
    padding: 0 9.5rem;
}

.nav {
    display: flex;
    align-items: center;
    align-content: stretch;
    li {
        padding: 0.5rem 0.75rem;
        &:hover {
            background-color: #f3f1f1;
            & span {
                color: #3273dc;
            }
        }
    }
}

@media screen and (max-width: 768px) {
    header {
        padding: 0;
    }
}
</style>
